<template>
    <div>
        <button @click="goTest">测试</button>
        <div class="box"v-for="item in test" :key="item.id">
           <img :src="item.img" alt="">
            <div>{{ item.source }}</div>
            <div>{{ item.time }}</div>
            <div>{{ item.title }}</div>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import axios from 'axios'
const test = ref([])
const goTest = async () => {
    const {data:{data}} = await axios.get('http://ajax-api.itheima.net/api/news')
    test.value =  data 
    console.log(data);
}
</script>
<style lang="scss" scoped>
.box{
    border: 1px solid #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    img{
        width: 10%;
    }
    div{
        width: 30%;
        margin-left: 1%;
        text-align: left;
    }
}
</style>